
<template>
  <div>

    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="文本内容">
          <el-input placeholder="请输入文本内容" style="width: 200px" v-model="queryParams.content"/>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select v-model="queryParams.auditStatus" placeholder="请选择" style="width: 200px;">
            <el-option value="1" label="待审核"></el-option>
            <el-option value="2" label="审核通过"></el-option>
            <el-option value="3" label="审核未通过"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button icon="Refresh" type="info" plain @click="refReshQuery()">重置</el-button>
          <el-button icon="Search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>

      </el-form>
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="AuditList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="sysUser.userName" label="用户编号" align="center"></el-table-column>
        <el-table-column prop="content" label="文本内容" align="center"></el-table-column>
        <el-table-column prop="imgFile" label="图片文件" show-overflow-tooltip align="center"></el-table-column>

        <el-table-column prop="audioFile" label="音频文件" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center"></el-table-column>

        <el-table-column label="审核状态" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag type="primary" v-if="scope.row.auditStatus == 1">待审核</el-tag>
            <el-tag type="success"  v-if="scope.row.auditStatus == 2">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditStatus == 3">审核拒绝</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="appeal" label="申诉反馈" show-overflow-tooltip align="center"></el-table-column>

       <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button icon="Warning" type="warning" plain  @click="openEditDialog(scope.row)">申诉</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>



    <el-dialog v-model="updateDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文本内容">
              <el-input placeholder="请输入文本内容" type="textarea" style="width: 240px" v-model="updateObj.content"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片文件">
              <ImageUpload v-model="updateObj.imgFile" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="音频文件">
              <FileUpload v-model="updateObj.audioFile"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="申诉理由">
              <el-input placeholder="请输入申诉理由" type="textarea" style="width: 240px" v-model="updateObj.appeal"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <center>
              <el-button plain icon="Refresh" type="info" @click="resetUpdateObj()">重置</el-button>

              <el-popconfirm title="真的要申诉吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="submitUpdate()">
                <template #reference>
                  <el-button plain icon="SuccessFilled" type="warning">申诉</el-button>
                </template>
              </el-popconfirm>

            </center>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog v-model="insertDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文本内容">
              <el-input placeholder="请输入文本内容" type="textarea" style="width: 240px" v-model="insertObj.content"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片文件">
              <ImageUpload v-model="insertObj.imgFile" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="音频内容">
              <FileUpload v-model="insertObj.audioFile"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <center>
              <el-button plain type="info" icon="Refresh" @click="resetInsertObj()">重置</el-button>
              <el-button plain type="warning" icon="SuccessFilled" @click="submitInsert()">提交</el-button>
            </center>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script setup>
//引入api接口updateGroupAudit
import {getAudit, updateAudit} from "@/api/audit/useraudit";

import { ElMessage } from 'element-plus';
import { onMounted ,ref,reactive} from 'vue';
import FileUpload from "@/components/FileUpload/index.vue";
import {  insertAudit} from "@/api/audit/adminaudit.js";

// 在组件挂载时调用 getList
onMounted(() => {
  console.log(212)
  getList();
});

const queryParams = ref({
  current: 1,
  size: 8,
  total: 0,
})

// 展示数据集合
const AuditList = ref([]);

// 弹窗标题
const title = ref("");

// 新增弹窗
const insertDialog = ref(false);

// 加载状态
const loading = ref(true);

/*// 新增对象
const insertObj = reactive({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});*/
// 修改弹窗
const updateDialog = ref(false);

// 修改对象
const updateObj = ref({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});

const insertObj = ref({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});

// 规则
const rules = ref({
  content: [{ required: true, message: '请输入文本内容', trigger: 'blur' }],
  imgFile: [{ required: true, message: '请输入图片文件', trigger: 'blur' }],
  audioFile: [{ required: true, message: '请输入音频文件', trigger: 'blur' }],
  createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
  auditStatus: [{ required: true, message: '请输入审核状态', trigger: 'blur' }],
  userId: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
});


//新增弹窗打开方法
function openInsertDialog(){
  console.log('a')
  //数据重置
  resetInsertObj();
  //打开弹窗
  insertDialog.value = true;
  //标题
  title.value = "新增审核";
  console.log(insertDialog.value)
}

function resetInsertObj(){
  console.log('b')
  insertObj.value.groupName = "";
  insertObj.value.groupImg = "";
  insertObj.value.groupPersonCount = "";
  insertObj.value.userId = "";
  insertObj.value.groupId = "";
  insertObj.value.qrCode = "";
  insertObj.value.status = "";
}

//查询方法
function getList(){
  //打开加载
  loading.value = true;
  //调用api接口
  getAudit(queryParams.value).then((res)=>{
    //关闭加载
    loading.value  = false;
    //赋值展示数据
    AuditList.value  = res.data.records;
    //赋值展示总行数
    queryParams.value .total = res.data.total;
    //弹出提示
    // 显示成功消息
    ElMessage({
      message: '加载完成',
      type: 'success',
    });
  })
}
//重置查询方法
function refReshQuery(){
  //重置数据
  queryParams.value.auditStatus = "";
  queryParams.value.content = "";
  queryParams.value.total = 0;
  queryParams.value.current = 1;
  queryParams.value.size = 8;
  getList();
}

//重置修改对象
function  resetUpdateObj(){
  updateObj.value.content = "";
  updateObj.value.imgFile = "";
  updateObj.value.audioFile = "";
  updateObj.value.createTime = "";
  updateObj.value.auditStatus = "";
  updateObj.value.userId = "";
}
//删除方法
function  deletingById(id){
  //调用api接口
  deleteAudit(id).then((res)=>{
    //刷新表格
    getList();
    //弹出提示
    // 显示成功消息
    ElMessage({
      message: '删除成功',
      type: 'success',
    });
  }).catch((error)=>{
    //弹出错误提示
    // 显示成功消息
    ElMessage({
      message: error,
      type: 'success',
    });
  })
}

//打开修改弹窗
function  openEditDialog(ele){
  //赋值
  updateObj.value  = ele;
  //判断赋值
  if (updateObj.value.auditStatus != null && updateObj.value.auditStatus != ''){
    updateObj.value.auditStatus = updateObj.value.auditStatus.toString();
  }
  //打开弹窗
  updateDialog.value  = true;
  //标题
  title.value  = "修改产品";
}
//提交修改
function  submitUpdate(){
  //调用修改接口
  updateAudit(updateObj.value).then((res)=>{
    //刷新表格
    getList();
    //关闭弹窗
    updateDialog.value  = false;
    //弹出错误提示

    // 显示成功消息
    ElMessage({
      message: '修改成功',
      type: 'success',
    });
  }).catch((error)=>{
    //弹出错误提示

    ElMessage({
      message: error,
      type: 'success',
    });
  })
}
//提交新增
function  submitInsert(){
  insertAudit(insertObj.value).then((res)=>{
    //关闭弹窗
    insertDialog.value = false;
    //重置对象
    resetInsertObj();
    //刷新表格
    getList();
  })
}
//页码更变
function  handleCurrentChange(index){
  //赋值数据
  queryParams.value.current = index;
  //调用查询
  getList();
}
//行数更变
function  handleSizeChange(size){
  //重置到第一行
  queryParams.value.current = 1;
  //赋值数据
  queryParams.value.size = size;
  //调用查询
  getList();
}




</script>
